<!-- 弹窗 详情 -->
<script lang="tsx" setup>
import FileUpload from "@/components/file-system/file-upload.vue";
import type { FormDescChild } from "@/components/form-desc/form-desc.vue";
import {
	whManagerBsTbCreditInfoReportSaveOrUpdateUsingPost,
	whManagerBsTbCreditInfoReportReportUsingPost,
} from "@/genapi/wh";
import { useAsync } from "@/hooks/use-async";
import { whManagerBsTbEnterpriseGetListUsingPost } from "@/genapi/wh";
import { computedLoading } from "@/hooks/computed-loading";
import { CREDIT_TYPE_OPTIONS } from "@/config/enum-map";
import { getEnumOptionsField } from "@/config/enum-options";

import { injectState } from "../state";

defineOptions({ name: "DetailDialog" });

const { page } = injectState()!;

const dialogRef = shallowRef<InstanceType<GlobalComponents["PromiseDialog"]>>();
const formDescRef = shallowRef<InstanceType<GlobalComponents["FormDesc"]>>();

const type = ref<"write" | "read">();

const beforeClose = async () => {
	if (type.value === "write") {
		await ElMessageBox.confirm("确认关闭？");
	}
};

const trigger = async (_type: "write" | "read" = "read", value = {} as any) => {
	type.value = _type;
	model.value = JSON.parse(JSON.stringify(value)) as any;
	await dialogRef.value?.open();
};

defineExpose({
	trigger,
});

const model = ref<(typeof page.records.value)[0]>({});

const file = computed({
	get() {
		if (model.value.fileId) {
			return [
				{
					id: model.value.fileId,
					name: model.value.fileName,
				},
			];
		}
	},
	set(value: any) {
		model.value.fileId = value?.[0]?.id;
	},
});

const title = computed(() => {
	if (type.value === "write") {
		return model.value.id ? "编辑" : "新增";
	} else {
		return `详情`;
	}
});

const [companyList] = computedLoading(async () => {
	const { data } = await whManagerBsTbEnterpriseGetListUsingPost({ data: {} });
	return data?.map((item) => ({ label: item.name, id: item.id })) ?? [];
});

const getCompanyName = (enterpriseId) => {
	const res = companyList.value?.filter((item) => {
		return item.id === enterpriseId;
	});
	return res[0] ? res[0].label : "--";
};

const { execute, isLoading } = useAsync(async () => {
	await formDescRef.value?.formRef?.validate();
	await ElMessageBox.confirm("确认提交？", "提示", {
		type: "warning",
	});
	if (model.value.id) {
		await whManagerBsTbCreditInfoReportReportUsingPost({
			data: {
				...model.value,
			},
		});
	} else {
		await whManagerBsTbCreditInfoReportSaveOrUpdateUsingPost({
			data: {
				...model.value,
			},
		});
	}

	ElMessage.success("提交成功");
	page.execute();
	dialogRef.value?.complete();
});

const [enterpriseOptions] = computedLoading(async () => {
	const { data } = await whManagerBsTbEnterpriseGetListUsingPost({ data: {} });
	return data?.map((item) => ({ label: item.name, value: item.id! })) ?? [];
});

let children: FormDescChild[] = computed(() => {
	if (type.value === "write" && model.value.id) {
		return [
			{
				label: "信用信息类型",
				prop: "type",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-select-v2
						options={[...CREDIT_TYPE_OPTIONS]}
						v-model={model.value.type}
						placeholder="-"
						disabled
					/>
				),
				descItem: () =>
					getEnumOptionsField(
						CREDIT_TYPE_OPTIONS,
						"label",
						model.value.type,
						"-",
					),
			},
			{
				label: "关联企业",
				prop: "enterpriseId",
				rule: [{ required: false, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-select-v2
						options={enterpriseOptions.value}
						v-model={model.value.enterpriseId}
						placeholder="请输入"
						disabled
					/>
				),
				descItem: () => `${getCompanyName(model.value.enterpriseId) ?? "-"}`,
			},
			{
				label: "信用信息详情",
				prop: "description",
				rule: [{ required: false, message: "请输入", trigger: "blur" }],
				span: 2,
				formItem: () => (
					<el-input
						type="textarea"
						rows={2}
						v-model={model.value.description}
						placeholder="请输入"
						disabled
					/>
				),
				descItem: () => `${model.value.description ?? "-"}`,
			},
			{
				label: "附件",
				prop: "fileIdList",
				rule: [{ required: false, message: "请输入", trigger: "blur" }],
				span: 2,
				formItem: () => (
					<FileUpload v-model={file.value} limit={1} w="100%">
						<el-button disabled type="primary">
							{{
								icon: () => <el-icon class="i-custom:add"></el-icon>,
								default: () => "增加附件",
							}}
						</el-button>
					</FileUpload>
				),
				descItem: () => (
					<FileUpload v-model={file.value} limit={1} disabled={true} />
				),
			},
			{
				label: "报送责任人",
				prop: "reportName",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-input v-model={model.value.reportName} placeholder="请输入" />
				),
				descItem: () => {},
			},
			{
				label: "报送时间",
				prop: "reportTime",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-date-picker
						v-model={model.value.reportTime}
						clearable
						type="date"
						placeholder="开始日期"
						value-format="YYYY-MM-DD HH:mm:ss "
					/>
				),
				descItem: () => {},
			},
			{
				label: "报送附件",
				prop: "reportFileIdList",
				rule: [{ required: false, message: "请输入", trigger: "blur" }],
				span: 2,
				formItem: () => (
					<FileUpload v-model={file.value} limit={1} w="100%">
						<el-button type="primary">
							{{
								icon: () => <el-icon class="i-custom:add"></el-icon>,
								default: () => "增加附件",
							}}
						</el-button>
					</FileUpload>
				),
				descItem: () => (
					<FileUpload v-model={file.value} limit={1} disabled={true} />
				),
			},
		];
	} else {
		return [
			{
				label: "信用信息类型",
				prop: "type",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-select-v2
						options={[...CREDIT_TYPE_OPTIONS]}
						v-model={model.value.type}
						placeholder="-"
					/>
				),
				descItem: () =>
					getEnumOptionsField(
						CREDIT_TYPE_OPTIONS,
						"label",
						model.value.type,
						"-",
					),
			},
			{
				label: "关联企业",
				prop: "enterpriseId",
				rule: [{ required: false, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-select-v2
						options={enterpriseOptions.value}
						v-model={model.value.enterpriseId}
						placeholder="请输入"
					/>
				),
				descItem: () => `${getCompanyName(model.value.enterpriseId) ?? "-"}`,
			},
			{
				label: "信用信息详情",
				prop: "description",
				rule: [{ required: false, message: "请输入", trigger: "blur" }],
				span: 2,
				formItem: () => (
					<el-input
						type="textarea"
						rows={6}
						v-model={model.value.description}
						placeholder="请输入"
					/>
				),
				descItem: () => `${model.value.description ?? "-"}`,
			},
			{
				label: "附件",
				prop: "fileId",
				rule: [{ required: false, message: "请输入", trigger: "blur" }],
				span: 2,
				formItem: () => (
					<FileUpload v-model={file.value} limit={1} w="100%">
						<el-button type="primary">
							{{
								icon: () => <el-icon class="i-custom:add"></el-icon>,
								default: () => "增加附件",
							}}
						</el-button>
					</FileUpload>
				),
				descItem: () => (
					<FileUpload v-model={file.value} limit={1} disabled={true} />
				),
			},
		];
	}
});
</script>

<template>
	<PromiseDialog
		ref="dialogRef"
		:title="title"
		:before-close="beforeClose"
		w="707px!"
	>
		<el-scrollbar h="408px!">
			<FormDesc
				ref="formDescRef"
				m="t-24px x-30px"
				:type="type === 'read' ? 'desc' : 'form'"
				form-class="gap-x-20px"
				:model="model"
				:children="children"
				:column="2"
			/>
		</el-scrollbar>
		<template v-if="type === 'write'" #footer>
			<el-button @click="dialogRef?.close()">取消</el-button>
			<el-button type="primary" :is-loading="isLoading" @click="execute()"
				>确定</el-button
			>
		</template>
	</PromiseDialog>
</template>
